<template>
	<view>
		<view class="example">
			<form style="padding: 20rpx;">
				<view style="display: flex; padding: 30rpx 0rpx; border-bottom: 4rpx solid ghostwhite;">
					<text>开户银行：</text>
					<picker mode="selector" :value="index" @change="onChange" :range="range" style="width: 450rpx; margin-left: 20rpx;">
						<input placeholder="请填写开户银行" :value=range[index] disabled="true"/>
					</picker>
						<!-- <input v-model="addressData.bankname" placeholder="请填写开户银行"
						style="width: 450rpx; margin-left: 20rpx;" /> -->
				</view>
				<view style="display: flex; padding: 30rpx 0rpx; border-bottom: 4rpx solid ghostwhite;">
					<text>银行卡号：</text><input v-model="addressData.bankscardnum" placeholder="请填写银行卡号"
						style="width: 450rpx; margin-left: 20rpx; " type="number"/>
				</view>
				<view style="display: flex; padding:30rpx 0rpx;border-bottom: 4rpx solid ghostwhite;">
					<text>您的姓名：</text><input v-model="addressData.name" placeholder="请填写您的姓名"
						style="width: 450rpx; margin-left: 20rpx;" type="nickname"/>
				</view>
				<view style="display: flex; padding: 30rpx 0rpx;border-bottom: 4rpx solid ghostwhite;">
					<text>您的手机：</text><input v-model="addressData.phone" placeholder="请填写您的手机"
						style="width: 450rpx; margin-left: 20rpx;" type="number"/>
				</view>
				<view style="display: flex; padding: 30rpx 0rpx;">
					<text>身份证号：</text><input v-model="addressData.idnum" placeholder="请填写身份证号"
						style="width: 450rpx; margin-left: 20rpx;" type="idcard"/>
				</view>
			</form>
		</view>
		<!-- <view style="color: red;margin: 20rpx 30rpx;">
			银行卡号添加请勿加空格！
		</view> -->
		<view>
			<button type="primary" @click="getstate" class="bind-buttom">提交</button>
		</view>
		<view style="text-align: center; margin-top: 580rpx;">
			<checkbox-group style="font-size: 24rpx;" @change="checkboxChange">
				<checkbox color="#999" :checked="checkedif" />我已阅读并同意签署<text @tap="getuseragree"
					style="color: cornflowerblue;">《灵活就业合作伙伴协议》</text>
			</checkbox-group>
		</view>
		<!-- <cc-selectDity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity> -->
		
	</view>
</template>

<script>
	let App = getApp()
	export default {
		data() {
			return {
				show: false,
				state:false,
				sheng:"",
				shi:"",
				qu:"",
				userid:"",
				adminid:0,
				addressData: {
					name: '',
					phone: '',
					address: '',
					moreAddres: '',
					idnum:"",
					bankscardnum:"",
					bankname:"",
					isdefult: 0
				},
				range: [ 
					'国家开发银行','中国工商银行','中国农业银行','中国银行','中国建设银行','中国邮政储蓄银行','交通银行',
					'招商银行','上海浦东发展银行','兴业银行','华夏银行','广东发展银行','中国民生银行','中信银行','中国光大银行',
					
				],
				index:"",
				isShow: true
			}
		},
		methods: {
			onChange(event) {
			    this.index = event.detail.value
				console.log(this.index)
			    // console.log('选择的值为：', this.range[this.index].text)
			},
			//选择地区的方法
			openPicker() {
				console.log('执行打开地址选择器')
				this.show = true
			},
			//选中省市区
			onsetCity(e) {
				let data = e.detail.target.dataset;
				this.sheng=data.province;
				console.log("省是"+this.sheng)
				this.shi=data.city;
				console.log("市是"+this.shi)
				this.qu=data.area;
				console.log("区是"+this.qu)
				let address = data.province + data.city + data.area;
				this.show = false
				this.addressData.address = address
			},
			onhideShow() {
				this.show = false
				console.log('执行了关闭地址选择器')
			},
			//点击下方协议的按钮
			checkboxChange(){
				this.state=!this.state
				console.log("进入else了"+this.state)
			},
			//提交信息上传
			setuserinfo(){
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				//addBankCard -> addcloudbankcard ->addBankCard
				// this.$api.interfaceApi('addcloudbankcard')({
				// 	// 'id': userinfo.id,
				// 	// 'bank': this.addressData.bankscardnum,
				// 	// 'name': this.addressData.name,
				// 	// 'mobile': this.addressData.phone,
				// 	// 'number':this.addressData.idnum,
				// 	// 'bankname':this.range[this.index],
				// 	// 'admin_id':App.globalData.sys,
				// 	'uid': userinfo.id,
				// 	'card_no': this.addressData.bankscardnum,
				// 	'name': this.addressData.name,
				// 	'phone': this.addressData.phone,
				// 	'id_card':this.addressData.idnum,
				// 	'bank_name':this.range[this.index],
				// 	'sys':App.globalData.sys,
				// })
				this.$api.interfaceApi('addBankCard')({
					'id': userinfo.id,
					'bank': this.addressData.bankscardnum,
					'name': this.addressData.name,
					'mobile': this.addressData.phone,
					'number':this.addressData.idnum,
					'bankname':this.range[this.index],
					'admin_id':App.globalData.sys,
				}).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							icon:'success'
						})
						uni.navigateBack({delta:2});
					}else{
						uni.showToast({
							title: res.msg,
							icon:'error'
						})
					}
					uni.hideLoading()
				})
			},
			getstate(){
				if(this.state==false){
					uni.showToast({
						icon:"error",
						title:"请勾选下方按钮"
					})
				}else{
					this.setuserinfo()
				}
			},
			//服务协议点击事件
			getuseragree(){
				uni.navigateTo({
					url:"/pages/mine/servetext?admin="+this.adminid
				})
			},
			// //隐私协议点击事件
			// getprivacy(){
			// 	uni.navigateTo({
			// 		url:"/pages/my/privacytext?admin="+this.adminid
			// 		//url:'/pages/my/privacytext'
			// 	})
			// },
		},
		onLoad() {
			this.adminid=App.globalData.sys
			this.userid=uni.getStorageSync("user_id")
		}
	}
</script>

<style>
	.example {
			width: 690rpx;
			height: 580rpx;
			margin-top: 30rpx;
			margin-left: 30rpx;
			background-color: white;
			border-radius: 10px;
			display: flex;
	}
	
	.bind-buttom{
		width: 700rpx;
		height: 80rpx;
		margin-top: 40rpx;
		background-color: blue;
		border-radius: 40rpx;
	}
</style>